<template>
  <div class="container">
    <img class="bg" src="../../assets/QRverification/qiandao-bg.png" alt="">
    <div class="main">
      <div class="header">
        <p class="userName">客户,您好</p>
        <p class="hint">以下是您的参会二维码</p>
        <p class="baoguan">大会期间需扫码进场，请妥善保管</p>
      </div>
      <div class="QRimg">
          <canvas id="qrcode"></canvas>
        <p class="time">签到时间：{{userInfo.exhAuditCheckInTime}}</p>
        <p class="time">大会时间：{{userInfo.beginTime}}</p>
        <p class="address">大会地址：{{userInfo.exhAddress}}</p>
      </div>
    <p class="hint1">注，请截图保存图片/保留短信。入场时出示</p>

    </div>
  </div>
</template>
<script>
import { Toast, Dialog,} from 'vant'
import QRCode from 'qrcode';
console.log(QRCode)
export default {
  components:{
    [Toast.name]:Toast,
    [Dialog.name]:Dialog,
  },
  data(){
    return{
      token:'',
      userInfo:'',
    }
  },
  mounted(){
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this = this;
    let qr = this.$util.getUrlKey('q')||this.$util.getUrlKey('qr');
    console.log(qr)
    this.useqrcode(qr);
     this.$api.post('/exh/v1/appoint_info/'+qr,{
      },s=>{
        console.log(s)
        _this.userInfo = s.module;
      },f=>{
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*"
      })
  },
  methods:{
    // 城市弹窗
    useqrcode(qr){
      QRCode.toCanvas(document.getElementById('qrcode'),qr,{
      version: '7',
      errorCorrectionLevel:'H',
      margin: '3',
      color: {
        light: '#fff',
        dark: '#000'
      }},
      function (error) {
        // if (error) console.error(error)
        console.log('QRCode success!');
      })
    },
    cancelArea(){
      this.areaShow =!this.areaShow;
    },
        // 城市选择
    onSelectArea(item){
      console.log(item)
      this.areaShow =!this.areaShow;
      this.areaCode = item[1].code;
      this.address = `${item[0].name} ${item[1].name}`;
      // this.dwellProvince = item[0].code //省
      // this.dwellCity = item[1].code //市
      // this.dwellCounty = item[2].code //区
    },
    Submit(){
      let _this = this;
      let pat = /^1\d{10}$/;
      if(!this.userName){
        Toast('请输入您的姓名');
        return;
      }
      // if(!this.userId){
      //   Toast('请输入您的身份证');
      //   return;
      // }
      if(!this.phone){
        Toast('请输入您的手机号');
        return;
      }
      if(!pat.test(this.phone)){
        Toast('请输入有效的手机号码');
        return false
      }
      if(this.address=='请选择区域 >'){
        Toast('请完善您的所在区域');
        return;
      }
      Toast.loading({message: '加载中...'});
      let data =`?exhId=1&name=${this.userName}&phone=${this.phone}&idCardNo=1&areaCode=${this.areaCode}`
      this.$api.post('/exh/v1/appointment'+data,{
        // "exhId": 1,
        // "name": this.userName,
        // "phone": this.phone,
        // "idCardNo":this.userId,
        // "areaCode": this.areaCode,
      },s=>{
        console.log(s)
        Toast.clear();
        Toast('预约成功');
        _this.userName = '';
        _this.phone='';
        _this.address="请选择区域 >";
        _this.areaCode='';
      },f=>{
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*"
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  width: 100%;
  height:100%;
  text-align: left;
  background: #000;
  // background-size:100% 100%;
}
.bg{
  position: absolute;
  left:0;top:0;
  width:100%;

}
.head-bg{
  width:100%;
  height:273px;

}
.main{
  position: relative;
  z-index:1;
  text-align: center;
  width:291px;
  height:452px;
  // padding-bottom:40px;
  margin:100px auto 0;
}
.header{
  overflow: hidden;
  width:100%;
  height:136px;
  background: url("../../assets/QRverification/userInfo.png") no-repeat;
  background-size:100% 100%;
}
.QRimg{
  width:100%;
  height:316px;
  background: #fff;
  border-radius: 0 0 20px 20px;
}
#qrcode{
  width:100px;
  height:100px;
}
.userName{
  margin-top:28px;
  text-align: center;
  font-size:25px;
  font-weight:500;
  line-height:25px;
  color:#0ff;
}
.hint{
  margin-top:12px;
}
.hint,.baoguan{
  text-align: center;
  line-height: 20px;
  font-size:12px;
  color:#f5f6f8;
}
#qrcode{
  margin:20px auto 0;
}
.time,.address{
  font-size:12px;
  line-height: 20px;
  color:#333;
}
.hint1{
  margin-top:10px;
  text-align: center;
  font-size:14px;
  line-height: 20px;
  color:#fff;
}
</style>